<template>
 <el-container class="question-page" id="background">
    <el-header class="header">
      <el-button @click="goBack" icon="el-icon-arrow-left">返回</el-button>
      <h1>我是智能助手小钩八</h1>
      <el-button type="text">菜单</el-button>
    </el-header>
    <el-main>
      <el-alert title="人工智能小助手" type="warning" class="notice" />
      <el-card class="question-form">
        <div class="avatar">
          <img :src="avatarUrl" alt="Avatar" />
        </div>
        <h2>请描述您的问题</h2>
        <el-form @submit.prevent="submitQuestion" label-width="110px">
          <el-form-item label="问题描述*">
            <el-input type="textarea" v-model="IssueInfo.description" placeholder="请描述您的问题"></el-input>
          </el-form-item>
          <el-form-item label="问题类型*">
            <el-select v-model="IssueInfo.type" placeholder="请选择">
              <el-option v-for="item in questionTypes" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交问题图片">
            <el-upload class="image-upload" ref="upload" action="http://localhost:8877/tIssue/addIssue"
              :headers="headers" name="file" :auto-upload="false" :data="uploadData" :on-success="handleUploadSuccess"
              :on-error="handleUploadError">
              <el-button slot="trigger" type="primary">选择图片</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">启动</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="resetForm">取消</el-button>
          </el-form-item>
        </el-form>

        <!-- 渲染答案 -->
        <div v-if="answers.length > 0" class="answers">
          <h3>答案列表：</h3>
          <el-card v-for="(answer, index) in answers" :key="index" class="answer-card">
            <p>{{ answer }}</p>
            <el-button type="primary" @click="handleButtonClick(index, 'accept')">接受</el-button>
            <el-button type="danger" @click="handleButtonClick(index, 'reject')">人工介入</el-button>
          </el-card>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "Issue",
    data() {
      return {
        IssueInfo: {
          description: '',
          type: '', // 这里的属性名改为 type，之前的 categoryName 改为 type 以对应问题类型
        },
        headers: {
          token: localStorage.getItem("token"),
        },
        avatarUrl: require('../../static/R-C.jpg'),
        questionTypes: [],
        answers: [] // 添加答案数据
      };
    },
    computed: {
      uploadData() {
        return {
          description: this.IssueInfo.description,
          categoryName: this.IssueInfo.type
        };
      }
    },
    methods: {
      submitQuestion() {
        console.log("问题描述:", this.IssueInfo.description);
        console.log("问题类型:", this.IssueInfo.type);
        // 在这里可以添加其他提交的请求代码
      },

      submitUpload() {
        this.$refs.upload.submit();
      },

      handleUploadSuccess(response, file) {
        console.log("文件上传成功:", response);
        // 假设返回的数据格式为 { code: 200, message: 'success', data: Array(3) }
        if (response.code === 200) {
          this.answers = response.data; // 将返回的答案数组存储到 answers
        } else {
          console.error("上传失败:", response.message);
        }
      },

      handleUploadError(err, file) {
        console.error("文件上传失败:", err);
      },

      handleButtonClick(index, action) {
        if (action === 'accept') {
          const payload = {
            description: this.IssueInfo.description,
            categoryName: this.IssueInfo.type
          };
          // 使用 this.$http 发送 POST 请求
          this.$http.post('/tIssue/veryGood', payload, {
            })
            .then(resp => {
              console.log(resp.data);
              // this.$router.go(0); // 刷新当前页面
            })
          // this.$router.go(0);
          // 在这里处理接受逻辑
        } else if (action === 'reject') {
          const payload = {
            description: this.IssueInfo.description,
            categoryName: this.IssueInfo.type
          };
          console.log(payload)
          console.log(`拒绝答案: ${this.answers[index]}`);
          // 在这里处理拒绝逻辑
          this.$http.post('/tWorkOrder/convertToManualLabor',payload)
            .then(resp => {
              alert("以发布工单 请在聊天室等待工作人员答复")
            })
        }
      },
      resetForm() {
        this.IssueInfo.description = '';
        this.IssueInfo.type = '';
        this.answers = []; // 重置答案列表
        this.$refs.upload.clearFiles();
      },

      goBack() {
        this.$router.go(-1);
      },

      getQuestionTypeListByEs() {
        this.$http.post('/ES/getQuestionTypeListByEs')
          .then(response => {
            console.log(response);
            if (response.data && response.data.code === 200) {
              this.questionTypes = response.data.data;
            } else {
              console.error("获取问题类型失败:", response.data.message);
            }
          })
          .catch(error => {
            console.error("Error fetching question types:", error);
          });
      },
    },
    created() {
      this.getQuestionTypeListByEs();
    },
  }
</script>

<style scoped>
  .question-page {
    background-color: #f5f7fa;
    /* 设置一个浅色背景 */
  }

  .header {
    background-color: #409eff;
    /* 头部颜色 */
    color: white;
    /* 头部文字颜色 */
    padding: 10px;
    /* 内边距 */
    display: flex;
    /* 使用 flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐 */
  }

  .header h1 {
    flex-grow: 1;
    /* 让标题占满剩余空间 */
    text-align: center;
    /* 居中对齐标题 */
  }

  .notice {
    margin: 20px 0;
    /* 间距调整 */
  }

  .question-form {
    background-color: white;
    /* 表单背景颜色 */
    padding: 20px;
    /* 内边距 */
    border-radius: 8px;
    /* 边角圆润 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
  }

  .avatar {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    margin-bottom: 20px;
    /* 下边距 */
  }

  .avatar img {
    border-radius: 50%;
    /* 头像圆形 */
    width: 80px;
    /* 头像宽度 */
    height: 80px;
    /* 头像高度 */
  }

  .answers {
    margin-top: 20px;
    /* 上边s距 */
  }

  .answer-card {
    margin: 10px 0;
    /* 每个答案卡片与其他的上下间距 */
    padding: 15px;
    /* 卡片内边距 */
    border: 1px solid #e2e2e2;
    /* 边框样式 */
    border-radius: 5px;
    /* 边角圆润 */
    background-color: #f9f9f9;
    /* 卡片背景颜色 */
  }

  .answer-card p {
    margin: 0;
    /* 消除段落的默认间距 */
    color: #333;
    /* 文字颜色 */
  }

  .el-button {
    margin-right: 10px;
    /* 按钮之间的间距 */
  }

  .el-button[type="primary"] {
    background-color: #409eff;
    /* 主按钮颜色 */
    color: white;
    /* 主按钮文字颜色 */
  }

  .el-button[type="danger"] {
    background-color: #f56c6c;
    /* 危险按钮颜色 */
    color: white;
    /* 危险按钮文字颜色 */
  }
</style>
